<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=request.getContextPath() %>\">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>晒单评价</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<style type="text/css"> 
		*{
			margin: 0;
			padding: 0;
			border:1px;
		}
		body{
			font-family: "microsoft yahei";
			font-size: 14px;
			color: #333;
			background: #f7f7f7;
		}
		a{
			color: #767676;
			text-decoration: none;
		}
		.my-main{
			width: 1140px;
			height: 968px;
			margin: 20px auto;
		}
		/*
			左边导航栏
		*/
		.leftNav{
			width: 160px;
			height: 500px;
			background: #fff;
			padding-right: 15px;
			padding-left: 15px;
			padding-top: 27px;
		}
		.my-menu dt{
			padding: 10px 15px;
			font-weight: 700;
		}
		.my-menu dd{
			border-bottom: 1px solid #d5d5d5;
		}
		.my-menu dd .nav{
			list-style: none;
		}
		.my-menu dd .nav li a{
			border-radius: 2px;
			display: block;
			padding: 10px 15px;
		}
		.my-menu .mm-root a{
			color: #da2a2a;
			font-size: 18px;
			font-weight: 500;
		}
		/*
			右边内容
		*/
		.my-page{
			padding: 20px;
			float: right;
			width: 890px;
			height: 460px;
			background: #fff;
			margin-top: -493px;
		}
		.col-xs-10{
			position: relative;
			min-height: 1px;
		}
		.page-header{
			margin: 0 0 20px;
			padding-bottom: 9px;
			border-bottom: 1px solid#eee;
			font-size: 18px;
		}
		.my-main.page-header.h1{
			margin: 0;
			font-family: inherit;
			font-weight: 500;
			line-height: 1.1;
			color: inherit;
		}
		.nav-tabs{
			border-bottom: 1px solid #ddd;
			padding-left: 0px;
		}
		.nav-tabs:after{
			content: ".";
			display: block;
			visibility: hidden;
			clear: both;
		}
		.nav-tabs>li{
			float: left;
			margin-bottom: -1px;
		}
		.nav>li{
			position: relative;
			display: block;
		}
		li,ul{
			list-style: none;
		}
		.nav-tabs>li>a{
			margin-right: 2px;
			line-height: 1.4285;
			border-radius: 2px 2px 0 0;
		}
		.nav>li>a{
			position: relative;
			display: block;
			padding: 10px 15px;
		}
	.my-page.mo-list-items{
		width:100%;
		border-collapse: collapse;
		border: 1px solid#ddd;
	}
	thead{
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}	
	tr{
		display: table-header-group;
		vertical-align: inherit;
	}	
	td{
		display: table-cell;
		padding-left:10px;
	}	
	.mo-list-items{
		 border-bottom-color: #ddd;
    	border-bottom-style: solid;
	}
	.my-page.mo-list-items.mo-item{
		padding: 5px 0;
		border-bottom: 1px #efefef solid;
	}
	div{
		display: block;
	}
	.col-xs-2{
		float: left;
		width: 16.66666667%;
	}
	.img-thumbnail{
	    display: inline-block;
		padding: 10px 25px;
		border: 1px solid#ddd;
		height: 65px;
		margin-top: 18px;
	}
	.col-xs-4{
		margin-left: 158px;
		width: 27.33333333%;
		padding-top: 20px;
		margin-top: 12px;
	}
	.col-xs-5{
		margin-left: 159px;
		padding-top: 14px;
	}
	.col-xs-6{
		margin-left: 275px;
		color: darkslateblue;
		font-size: 18px;
	}
	.col-xs-7{
		margin-left: 190px;
		margin-top: -70px;
		font-weight: 400;
	}
	.col-1{
		font-size: 16px;
		color: #000000;
		font-weight: 800;
	}
	.checkbox{
		padding: 7px;
		margin-left: 695px;
		margin-top: -60px;
	}
	.dzbtnbc{
		padding: 5px 18px;
		font-size: 20px;
		border-radius: 3px;
		color: #fff;
		background-color: #2f973f;
		border-color: #2f973f;
		border: 1px solid transparent;
		margin-top: 36px;
		margin-left:376px;
	}
	.s{
		font-weight: 800;
	}
	/*
	*发表评价样式
	*/
			div{
					display: block;
				}
			.form-group:after,.publish.guanbi:after{
					content: ".";
					display: block;
					visibility: hidden;
					height: 0px;
					clear: both;
				}
			.juzhong{
					padding-top: 30px;
				}
			form{
					display: block;
				}
			.form-group{
					margin-bottom: 15px;
				}
			.control-label{
					margin-left: 85px;
					margin-top: 1px;					
				}
			.col-xs-22{
					float: left;
				}
			.publish{
					width: 66%;
					height: 600px;
					margin: 80px auto;
					background-color: #fff;
				}
			.publish.guanbi{
					margin-bottom: 10px;
				}
			.publish.guanbi:after{
					content: ".";
					display: block;
					visibility: hidden;
					clear: both;
				}
			.publish.guanbi.gbimg{
					float: right;
					padding: 10px 15px;
				}
			.publish.guanbi.pingjia{
					float: left;
					padding: 10px 15px;
				}
			.publish.guanbi.pingjia h3{
					font-weight: 550;
				}
			h3{
					display: block;
					font-size: 1.17em;
					padding-left: 35px;
					padding-top:24px ;
				}
			.publish.guanbi.pingjia small{
					font-size: 12px;
				}
			.jia.jia-1.img{
					width: 24px;
					height: 30px;
					float: right;
					margin-top: -30px;
					margin-right: 25px;
				}
			.gbimg{
					vertical-align: middle;
					float: right;
					margin-top: -36px;
					margin-right: 10px;
				}
				/* 评价星星
				 */
				#star{
					position:relative;
					width:724px;
					margin:20px auto;
					height:24px;
					}
				#star ul,#star span{
					float:left;
					display:inline;
					height:19px;
					line-height:19px;
					}
				#star ul{
					margin:0 100px;
					}
				#star li{
					float:left;
					width:24px;
					cursor:pointer;
					text-indent:-9999px;
					background:url("imgs/liuimgs/icon.gif") no-repeat;
					}
				#star strong{
					color:#f60;
					padding-left:10px;
					}
				#star li.on{
					background-position:0 -28px;
					}
				#star p{
					position:absolute;
					top:20px;
					width:159px;
					height:60px;
					display:none;
					background:url("imgs/liuimgs/star.png") no-repeat;
					padding:7px 10px 0;
					}
				#star p em{
					color:#f60;
					display:block;
					font-style:normal;
					}
				.checkboxs{

					padding-left: 245px;
					margin-top: 86px;	
				}
			.dzbtnbc{
					padding: 5px 14px;
					font-size: 20px;
					border-radius: 3px;
					margin-left: 286px;
					margin-top: 2px;
				}
		.dianji{
				padding:5px 14px;
				font-size: 20px;
				border-radius: 3px;
				color: #fff;
				background-color: #2f973f;
				border-color: #2f973f;
				border: 1px solid transparent;
				margin-left: 35px;
				margin-top: 71px;
		}
			.jia{
					float: left;
					position: relative;
					top:0px;
					left:0px;
				}	
			.jia-1{
					float: left;
				    margin-top: 15px;
					margin-left: 80px;
					padding-left: 40px;
				}
			.form-control{
					width: 80%;
					height: 125px;
					padding: 5px 52px;
					border: 1px solid#ddd;
					border-radius: 2px;
					margin-top: 90px;
					font-size: 14px;
				}
			.yy{
						display: none;
						width: 100%;
						height: 120%;
						position: fixed;
						top: -79px;
						left: 2px;
						z-index: 99999;
						background-color: rgba(0,0,0,0.3);
				}
	/*图片上传*/
        .z_photo {
            width: 42rem;
            height: 6rem;
            padding: 0.3rem;
            margin: 1rem auto;
        }
        .z_photo:after{
        	content:".";
        	display: block;
        	visibility: hidden;
        	height:0px;
        	clear: both;
        }
        .z_photo img {
            width: 6rem;
            height: 6rem;
            margin-top:-10px;
        }
        
        .z_addImg {
            float: left;
            margin-right: 0.2rem;
        }
        
        .z_file {
            width: 6rem;
            height: 6rem;
            background: url("imgs/liuimgs/z_add.png") no-repeat;
            background-size: 100% 100%;
            float: left;
			margin-left: 70px;
			margin-top:-9px;
		}
        .z_file input::-webkit-file-upload-button {
            width: 1rem;
            height: 1rem;
            border: none;
            position: absolute;
            outline: 0;
            opacity: 0;
        }       
        /*遮罩层*/
        
        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
        }
        
        .z_alert {
            width: 15rem;
            height: 5rem;
            border-radius: .2rem;
            background: #ddd;
            text-align: center;
            position: absolute;
            left: 46%;
            top: 37%;
            padding-top:18px;
        }
        
        .z_alert p:nth-child(1) {
            line-height: 1.5rem;
        }
        
        .z_alert p:nth-child(2) span {
            width: 48%;
            line-height: .5rem;
            float: left;
        }
	
				/*
				*	头部样式
				*/
					#header{
								position: relative;
								height: 40px;
								color: #b0b0b0;
								background: #333;
							}
					#header .content{
								width: 1140px;
								margin: 0px auto;
								padding: 0px;
							}
					.content .contents{
								float: left;
								height: 40px;
								line-height: 40px;
							}
					#header a{
								color: #b0b0b0;
								line-height: 40px;
								cursor: pointer;
								position: relative;
								margin: 0.625rem;
							}
					#header .geka{
								color: #424242;
							}
					.cart{
								background:#424242 ;
								padding: 0 32px;
								position: relative;
								float: right;
								height: 40px;								
							}
					.cart .shopcart{
								width: 20px;
								top: -3px;
								position: relative;
							}
					.login{
								position: relative;
								float: right;
								height: 40px;
							}
					.sitheader{
								z-index: 100;
								box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
								height: 50px;
								line-height: 50px;
								width: 1140px;
								background: #f4f4f4;
								position: absolute;
								left: 50%;
								margin-left: -568px;
							}
					.row:before {
								display: table;
								content: " ";
							}
					.sitheader .sitheader-pos{
								position: relative;
								padding: 0px;
							}
					.sitheader .sitheader-pos .row{
								font-size: 14px;
								text-align: center;
								margin: 0;
							}
					.logos{
								width: 141px;
								float: left;
							}
					.logos img{
								vertical-align: middle;
							}
					.homes{
								position: static;
								width: 70px;
								padding: 0;
								float: left;
							}
					.logos a{
								cursor: pointer;
							}
					.homes a{
								cursor: pointer;
							}
					a {
								color: #767676; 
								text-decoration: none;
							}
			/*
			*	尾部样式
			*/					
					.conrtainers {
							    width: 1140px;
							}
					.containers:before {
							    display: table;
							    content: " ";
							}
					.sitfooter .conrtainers .footer{
								    padding: 0px 0 19px 0;
							}
					.sitfooter .conrtainers .footer .service {
							    width: 1100px;
							    margin: 0 auto;
							}
					.sitfooter .conrtainers .footer .service:before {
							    content: "";
							    display: block;
							    clear: both;
							}
					.sitfooter .conrtainers .footer .service:after {
							    content: "";
							    display: block;
							    clear: both;
								}
					.sitfooter .conrtainers .footer li {
							    width: 200px;
							    float: left;
							    position: relative;
							    display: block;
							    padding-left: 20px;
								margin-top:54px;
							}
					.sitfooter .conrtainers .footer li .cons {
							    float: left;
							    margin: 12px 12px 0 0;
							}
					.sitfooter .conrtainers .footer li .title {
							    display: inline-block;
							    color: #b2b2b2;
							}
					.sitfooter .conrtainers .footer li .title h2 {
							    margin-bottom: 5px;
							}
					.sitfooter .conrtainers .footcenter{
								padding: 42px 24px;
							    border-top: 1px solid #eaeaea;
							}
					.sitfooter .conrtainers .footcenter:after{
								content: ".";
								display: block;
								visibility: hidden;
								height: 0px;
								clear: both;
							}
					.sitfooter .conrtainers .footcenter dl {
							    float: left;
							    width: 140px;
							}
					.sitfooter .conrtainers .footcenter dl:before {
							    content: "";
							    display: block;
							    clear: both;
							}
					dt {
							    font-weight: 700;
							    line-height: 35px;
							}
					dd{
								margin-left: 0px;
							}
					.footcenter dl dd {
							    line-height: 35px;
							    font-size: 12px;
							}
					.sitfooter .conrtainers .footcenter .phone {
								border-left: 1px solid #eaeaea;
							    width: 250px;
							    height: 125px;
							    float: right;
							    text-align: center;
							}
					.hotlines{
								font-size: 15px;
								color: #6f6c71;
								font-weight: 600;
							}
					p {
							    margin: 0 0 10px;
							}
					.phone .tels {
							    color: #ff5d59;
							    font-size: 26px;
							    margin-bottom: 15px;
							}
					.phone .customer {
							    border: 1px solid #ff5d59;
							    padding: 5px 3px;
							    color: #ff5d59;
							}
					.imgs{
								height: 14px;
							    margin-top: -3px;
							}
					dd a:hover{
								color: red;
							}
					.for-footer {
							    background: #313131;
							    height: 100px;
							    line-height: 100px;
							    padding: 0 20px;
							}
					.for-footer .for-logo {
							    float: left;
							}
					.for-footer .for-link {
							    float: right;
							    color: #666;
							    font-size: 12px;
							}
					.for-footer .for-link p {
							    display: inline;
							}
					.for-footer .for-link span {
							    margin-right: 5px;
							}
					.for-footer .for-link a {
							    color: #666;
							}
					.for-footer .for-link a:hover{
								color: white;
							}					
	</style>
	
	<script type="text/javascript"> 
	$(function(){
		// 星星事件
		window.onload = function (){
			var oStar = document.getElementById("star");
			var aLi = oStar.getElementsByTagName("li");
			var oUl = oStar.getElementsByTagName("ul")[0];
			var oSpan = oStar.getElementsByTagName("span")[1];
			var oP = oStar.getElementsByTagName("p")[0];
			var i = iScore = iStar = 0;
			var aMsg = [
						"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
						"不满意|部分有破损，与卖家描述的不符，不满意",
						"一般|质量一般，没有卖家描述的那么好",
						"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
						"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
						]
			
			for (i = 1; i <= aLi.length; i++){
				aLi[i - 1].index = i;
				
				//鼠标移过显示分数
				aLi[i - 1].onmouseover = function (){
					fnPoint(this.index);
					//浮动层显示
					oP.style.display = "block";
					//计算浮动层位置
					oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
					//匹配浮动层文字内容
					oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
				};
				
				//鼠标离开后恢复上次评分
				aLi[i - 1].onmouseout = function (){
					fnPoint();
					//关闭浮动层
					oP.style.display = "none"
				};
				
				//点击后进行评分处理
				aLi[i - 1].onclick = function (){
					iStar = this.index;
					oP.style.display = "none";
					oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
				}
			}
			//评分处理
			function fnPoint(iArg){
				//分数赋值
				iScore = iArg || iStar;
				for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";	
			}
			
		};
		
			//点击评价操作
				$(".gbimg").click(function(){
					$(".yy").css("display","none");
				})
				$(".dianji").click(function(){
					$(".yy").css("display","block");
				})
		
			
		 //px转换为rem
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
		
        function imgChange(obj1, obj2) {
            //获取点击的文本框
            var file = document.getElementById("file");
            //存放图片的父级元素
            var imgContainer = document.getElementsByClassName(obj1)[0];
            //获取的图片文件
            var fileList = file.files;
            //文本框的父级元素
            var input = document.getElementsByClassName(obj2)[0];
            var imgArr = [];
            //遍历获取到得图片文件
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(file.files[i]);
                imgArr.push(imgUrl);
                var img = document.createElement("img");
                img.setAttribute("src", imgArr[i]);
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "z_addImg");
                imgAdd.appendChild(img);
                imgContainer.appendChild(imgAdd);
               if(fileList.length>5){
            		alert('最多上传五张图片');
            		return false;
            	}
            };	
 			   imgRemove();
        };
     
		//删除图片
        function imgRemove() {
            var imgList = document.getElementsByClassName("z_addImg");
            var mask = document.getElementsByClassName("z_mask")[0];
            var cancel = document.getElementsByClassName("z_cancel")[0];
            var sure = document.getElementsByClassName("z_sure")[0];
            for (var j = 0; j < imgList.length; j++) {
                imgList[j].index = j;
                imgList[j].onclick = function() {
                    var t = this;
                    mask.style.display = "block";
                    cancel.onclick = function() {
                        mask.style.display = "none";
                    };
                    sure.onclick = function() {
                        mask.style.display = "none";
                        t.style.display = "none";
                    };

                }
            };
        };
	})
		//保存操作

	</script>
</head>
<body>
		<div class="my-header">
				<jsp:include page="include/header.jsp"></jsp:include>
		</div>
				
		<div class="my-main">
			<div class="row">
				<div class="leftNav">
					<dl class="my-menu">
						<dt class="mm-root">
							<a href="/member.html">会员中心</a>
						</dt>
						<dd></dd>
						<dt>交易</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="dingdan">我的订单</a>
								</li>
								<li>
									<a href="pingjia">晒单评价</a>
								</li>
								<li>
									<a href="gwc">我的购物车</a>
								</li>
							</ul>
						</dd>
						<dt>购物</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="address">我的收货地址</a>
								</li>
							</ul>
						</dd>
						<dt>账户</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="/my-account.html">个人信息</a>
								</li>
							</ul>
						</dd>
					</dl>
				</div>
					<div class="col-xs-10 my-page">
					<div class="comment-container">
						<h1 class="page-header">
							晒单评价
						</h1>
					</div>
					<ul class="nav nav-tabs ">
						<li class="active">
							<a href="/my-form.html">待评价</a>
						</li>
						<li class="">
							<a href="/my-form-commented.html">已评价</a>
						</li>
					</ul>
					<div>
						<table class="mo-list-items">
							<tbody>
								<tr>
									<td>
										<div class="mo-item">
											<div class="col-xs-2">
												<a>
													<img class="img-thumbnail" src="imgs/liuimgs/65c0b7e147bb932656db1ecfbc64403ca457d8fe.jpg">
												</a>
											</div>
											<div class="col-xs-4">
												<a class="col-1">B65U 65吋巨屏 超薄金属机身</a>
												<br />
												<br />
												 <a class="s">人工智能 全民K歌 1.5G+8G大内存</a>
											</div>
											<div class="col-xs-5">
												<a>购买时间：2019-3-25</a>
											</div>
											<div class="col-xs-7">
												<a class="col-xs-6">价&nbsp;格：21432.0&nbsp;元</a>
											</div>
											<div class="checkbox">
												<button type="submit" class="dianji">点击评价</button>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<table class="mo-list-items">
						<tbody>
							<tr>
								<td>
									<div class="mo-item">
										<div class="col-xs-2">
											<a>
												<img class="img-thumbnail" src="imgs/liuimgs/65c0b7e147bb932656db1ecfbc64403ca457d8fe.jpg">
											</a>
										</div>
										<div class="col-xs-4">
											<a class="col-1">B65U 65吋巨屏 超薄金属机身</a>
											<br />
											<br />
											 <a class="s">人工智能 全民K歌 1.5G+8G大内存</a>
										</div>
										<div class="col-xs-5">
											<a>购买时间：2019-3-25</a>
										</div>
										<div class="col-xs-7">
											<a class="col-xs-6">价&nbsp;格：21432.0&nbsp;元</a>
										</div>
										<div class="checkbox">
											<button type="submit" class="dianji">点击评价</button>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					
				</div>
			<div class="yy" style="display:none">
				<div class="publish">
					<div class="guanbi">
						<div class="pingjia">
							<h3>
								我的评价
								<small>My evaluate</small>
							</h3>
						</div>
						<div class="gbimg">
							<img src="imgs/liuimgs/dzgb.png"/>
						</div>
					</div>
					<div class="juzhong">
						<form action="" method="">
									<div id="star">
										<span>*评价打分:</span>
											<ul>
												<li><a href="javascript:;">1</a></li>
												<li><a href="javascript:;">2</a></li>
												<li><a href="javascript:;">3</a></li>
												<li><a href="javascript:;">4</a></li>
												<li><a href="javascript:;">5</a></li>
											</ul>
											<p style="left: 92px; display: none;">
												<em>
													<b>5</b>
														分  非常满意
												</em>
													质量非常好，与卖家描述的完全一致，非常满意
											</p>	
									</div>
							</form>
					</div>
									<div class="form-group">
											<label class="col-xs-3 control-label">
												*评价内容：
											</label>
											<div class="col-xs-7">
												<input type="text" class="form-control" placeholder="求上帝赐字~&nbsp;&nbsp;&nbsp;卑职感激莫名!"/>
											</div>
									</div>
									
									<div class="form-group">
										<label class="col-xs-22 control-label">
											*上传图片(可上传至5张图片)：
										</label>
									</div>
									
	 				<!--   图片添加    -->
     				   <div class="z_photo">
          				  <div class="z_file">
              				  <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" style="height:16px; margin-left:-18px;width:114px;margin-top:40px;color: white;" />
           				 </div>
       				 </div>
       				  <!--遮罩层-->
       				 <div class="z_mask" style="display:none;">
          		 	 <!--弹出框-->
          			  <div class="z_alert">
              			  <p>确定要删除这张图片吗？</p>
              			  <p>
                   			 	<span class="z_cancel">取消</span>
                    			<span class="z_sure">确定</span>
                			</p>
            		</div>
       		 </div>		
									<div class="jia">
										<button type="submit" class="dzbtnbc">发表评价</button>
									</div>						
							</div>
					</div>
				</div>
		<div class="my-footer">
				<jsp:include page="include/footer.jsp"></jsp:include>
		</div>	
		
</body>
</html>